﻿<script src="script/jquery.min.js" type="text/javascript"></script>
<script src="script/9gg.js" type="text/javascript"></script>
<script>
    function create() {
        var arrT = {};
        arrT.a11 = $("#a11").val() || 0;
        arrT.a21 = $("#a21").val() || 0;
        arrT.a31 = $("#a31").val() || 0;
        arrT.a12 = $("#a12").val() || 0;
        arrT.a13 = $("#a13").val() || 0;

        //下面是生成代码
        var T = _9GG.parse(arrT);

        var WIDTH = 100;
        var HEIGHT = 100;
        console.log("补充格子之后");

        var content = $("#content");
        var html = "";
        for (var o in T) {
            var div = $("<div id='_"+o+"'></div>");
            if ($("#_" + o).length == 0)
                content.append(div);
            $("#_" + o).html(T[o].id);


            $("#_" + o).stop().animate({
                left: parseInt(T[o].list[0].split(',')[0]) * WIDTH,
                top: parseInt(T[o].list[0].split(',')[1]) * HEIGHT,
                width: T[o].w * WIDTH,
                height: T[o].h * HEIGHT
            }, 500);
        }

    }

    $(create);
</script>

<style>
    * {
        font-size:12px;
    }
    #content div {
        position: absolute;
        border: 1px solid red;
    }
</style>

<body >
   <div id="content" style="margin-bottom:320px"></div>

请设置不同比例的图片数量：<br />
1:1<input type=text id="a11" value=30 />个<br />
2:1<input type=text id="a21" value=3 />个<br />
3:1<input type=text id="a31" value=5 />个<br />
1:2<input type=text id="a12" value=1 />个<br />
1:3<input type=text id="a13" value=0 />个<br />

<input type="button" value="生成" onclick="create();" />

</body>
